<template>
  <div>
    <div class="search">
      <a-card class="search-card">
        <div class="search-top">
          <span>筛选搜索</span>
          <div class="search-right">
            <a-button class="search-btn">重置</a-button>
            <a-button class="search-btn" type="primary">查询结果</a-button>
          </div>
        </div>
        <div class="search-buttom">
          <div class="search-box">
            输入搜索：
            <a-input
              class="search-text"
              placeholder="订单编号"
              style="width: 200px"
            />
          </div>
          <div class="search-box">
            收货人：
            <a-input
              class="search-text"
              placeholder="收货人姓名/手机号"
              style="width: 200px"
            />
          </div>
          <div class="search-box">
            提交时间：
            <a-input
              class="search-text"
              placeholder="品牌名称/关键字"
              style="width: 200px"
            />
          </div>
          <div class="search-box">
            订单状态：
            <a-select default-value="全部" style="width: 200px" @change="handleChange">
              <a-select-option value="not_paying">
                待付款
              </a-select-option>
              <a-select-option value="not_deliver">
                待发货
              </a-select-option>
              <a-select-option value="deliver">
                已发货
              </a-select-option>
              <a-select-option value="completed">
                已完成
              </a-select-option>
              <a-select-option value="shut_down">
                已关闭
              </a-select-option>
            </a-select>
          </div>
          <div class="search-box">
            订单分类：
            <a-select default-value="全部" style="width: 200px" @change="handleChange">
              <a-select-option value="normal">
                正常订单
              </a-select-option>
              <a-select-option value="seconds_kill">
                秒杀订单
              </a-select-option>
            </a-select>
          </div>
          <div class="search-box">
            订单来源：
            <a-select default-value="全部" style="width: 200px" @change="handleChange">
              <a-select-option value="pc">
                PC订单
              </a-select-option>
              <a-select-option value="app">
                APP订单
              </a-select-option>
            </a-select>
          </div>
        </div>
      </a-card>
    </div>
    <div class="add">
      <a-card class="add-card">
        <div class="add-box">
          <span>数据列表</span>
          <!-- <a-button class="add-btn" type="small">添加</a-button> -->
        </div>
      </a-card>
    </div>
    <div class="commodityType">
      <a-card class="commodityType-card">
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="rowSelection"
          bordered
        >
          <span slot="operation" class="operation">
            <a-button> 查看订单 </a-button>
            <a-button type="danger"> 删除订单 </a-button>
          </span>
        </a-table>
      </a-card>

    </div>

  </div>
</template>

<script>
const columns = [
  {
    title: '编号',
    dataIndex: 'order_id',
    align: 'center'
  },
  {
    title: '订单编号',
    dataIndex: 'order_number',
    align: 'center'
  },
  {
    title: '提交时间',
    dataIndex: 'submit_time',
    align: 'center'
  },
  {
    title: '用户账号',
    dataIndex: 'user_account',
    align: 'center'
  },
  {
    title: '订单金额',
    dataIndex: 'order_amount',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payment',
    align: 'center'
  },
  {
    title: '订单来源',
    dataIndex: 'order_source',
    align: 'center'
  },
  {
    title: '订单状态',
    dataIndex: 'order_state',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    align: 'center'
  }
]

const data = [
  {
    key: 1,
    order_id: 1,
    order_number: '202208170101000001',	// 订单编号
    submit_time: '2022-08-17 12:36:21',	// 提交时间
    user_account: 'test',	// 用户账户
    order_amount: 199,	// 订单金额
    payment: '微信',	// 支付方式
    order_source: 'APP订单',	// 订单来源
    order_state: '已关闭' // 订单状态
  },
  {
    key: 2,
    order_id: 13, // 编号
    order_number: '202208170101000002',	// 订单编号
    submit_time: '2022-08-17 12:40:21',	// 提交时间
    user_account: 'test',	// 用户账户
    order_amount: 188,	// 订单金额
    payment: '微信',	// 支付方式
    order_source: 'APP订单',	// 订单来源
    order_state: '已完成' // 订单状态
  },
  {
    key: 3,
    order_id: 13, // 编号
    order_number: '202208170101000002',	// 订单编号
    submit_time: '2022-08-17 12:40:21',	// 提交时间
    user_account: 'test',	// 用户账户
    order_amount: 188,	// 订单金额
    payment: '微信',	// 支付方式
    order_source: 'APP订单',	// 订单来源
    order_state: '已完成' // 订单状态
  },
  {
    key: 4,
    order_id: 13, // 编号
    order_number: '202208170101000002',	// 订单编号
    submit_time: '2022-08-17 12:40:21',	// 提交时间
    user_account: 'test',	// 用户账户
    order_amount: 188,	// 订单金额
    payment: '微信',	// 支付方式
    order_source: 'APP订单',	// 订单来源
    order_state: '已完成' // 订单状态
  },
  {
    key: 5,
    order_id: 13, // 编号
    order_number: '202208170101000002',	// 订单编号
    submit_time: '2022-08-17 12:40:21',	// 提交时间
    user_account: 'test',	// 用户账户
    order_amount: 188,	// 订单金额
    payment: '微信',	// 支付方式
    order_source: 'APP订单',	// 订单来源
    order_state: '已完成' // 订单状态
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      rowSelection
    }
  },
  methods: {
    // 制造商滑块
    onChange(checked) {
      console.log(`a-switch to ${checked}`)
    },
    // 是否显示滑块
    onChangeShow(checked) {
      console.log(`a-switch to ${checked}`)
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    }
  }
}
</script>

<style lang="scss">
.search {
  .search-card {
    margin: 20px;
    .search-top {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      .search-btn {
        margin-right: 10px;
      }
    }
    .search-buttom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      .search-box {
        padding-top: 10px;
        width: 33%;
      }
    }
  }
}

.add {
  .add-card {
    margin: 20px;
    .add-box {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 16px;
      }
    }
  }
}

.commodityType {
  margin: 20px;
  .operation {
    .ant-btn {
      margin-right: 5px;
    }
  }
}

</style>
